import React, {PureComponent} from 'react';
import {Dimensions, View, Text, TouchableWithoutFeedback} from 'react-native';
import PropTypes from 'prop-types';
import PullPicker from 'teaset/components/PullPicker/PullPicker';
import {TextInput} from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {post} from '../http/http';
import Row from '../components/Row';
import ModalViewUtil from '../components/ModalViewUtil';
import ColorButton from '../components/ColorButton';

const WIN_WIDTH = Dimensions.get('window').width;
const WIN_HEIGHT = Dimensions.get('window').height;
class BoxManageView2 extends PureComponent {
  static propTypes = {
    box: PropTypes.object,
    relType: PropTypes.number,
    checkBox: PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      warehousing: null,
      warehousingSum: '1',
      relType: -1,
      paper: {papersName: '不选择考试', typeName: '', papersId: undefined},
      type: null,
      state: 0,
    };
  }

  componentDidMount() {
    // TODO
    // if (HttpUtil.getUser().userType === 0) {
    //   this.changeState(1);
    // }
  }

  selectRelType = () => {
    const relTypes = ['借出', '领用', '租赁', '归还']; //0 借入 1 领用 2 租赁 3 归还
    PullPicker.show(
      '选择物品',
      relTypes,
      this.state.relType,
      (value, index) => {
        this.setState({
          relType: index,
          type: null,
          warehousing: null,
          paper: null,
          warehousingSum: 0,
        });
      },
    );
  };

  selectType = () => {
    post(
      '/assets/assetsType/api/getAssetsTypeByParentId?route=assets',
      {
        modelType: 1,
      },
      true,
    ).then(result => {
      console.log('data:', result.data);
      const list = result.data;
      PullPicker.show(
        '选择物品分类',
        list.map(v => `${v.typeName}`),
        -1,
        (value, index) => {
          this.setState({type: list[index]});
        },
      );
    });
  };

  selectMateria = () => {
    post(
      '/assets/assetsWarehousing/api/getAssetsWarehousingPage?route=assets',
      {
        page: 1,
        limit: 999,
        assetsTypeOne: this.state.type ? this.state.type.typeId : '',
        assetsState: this.state.relType === 3 ? 2 : 0,
      },
      true,
    ).then(result => {
      console.log('data:', result.data);
      const list = result.data.data;
      PullPicker.show(
        '选择物品',
        list.map(v => `${v.assetsName}(${v.modelName})`),
        -1,
        (value, index) => {
          this.setState({warehousing: list[index]});
        },
      );
    });
  };

  save = async () => {
    this.props.onSavePressed &&
      this.props.onSavePressed({
        relId: this.props.box.relId,
        relType: this.state.relType,
        warehousingId: this.state.warehousing.warehousingId,
        warehousingSum: this.state.warehousingSum,
      });
  };

  selectPapers = () => {
    post(
      '/examPaper/examinationPapers/api/queryExaminationPapersManageList?route=examPaper',
      {
        page: 1,
        limit: 999,
        applyStatus: 1,
        modelType: 1,
        papersStatus: 1,
        thisstate: 1,
      },
      true,
    ).then(result => {
      console.log('data:', result.data);
      const list = [
        {papersName: '不选择考试', typeName: '', papersId: undefined},
      ].concat(result.data.data);
      PullPicker.show(
        '选择考试',
        list.map(
          v => `${v.papersName}` + (v.papersId ? `(${v.typeName})` : ''),
        ),
        -1,
        (value, index) => {
          this.setState({paper: list[index]});
        },
      );
    });
  };

  changeState(state) {
    this.setState({state: state});
    if (state === 1) {
      // this.handler = setInterval(() => {
      //     this.props.checkBox &&
      //         this.props.checkBox((open) => {
      //             if (!open) {
      //                 clearInterval(this.handler);
      //                 // ModalViewUtil.dismissView();
      //                 this.props.onSavePressed &&
      //                     this.props.onSavePressed({
      //                         relId: this.props.box.relId,
      //                         token: HttpUtil.getUser().token
      //                     });
      //             }
      //         });
      // }, 1500);
    } else {
      if (this.handler) {
        clearInterval(this.handler);
        this.handler = null;
      }
    }
  }

  render() {
    const relTypes = ['借入、借出', '领用', '租赁', '归还']; //0 借入、借出 1 领用 2 租赁
    return (
      <View
        style={{
          width: WIN_WIDTH * 0.9,
          backgroundColor: 'white',
          alignItems: 'stretch',
          paddingBottom: 15,
        }}>
        <LinearGradient
          colors={['#30CF9C', '#1AA6F6']}
          start={{x: 0, y: 0}}
          end={{x: 1, y: 0}}
          style={{height: 60}}>
          <Row
            style={{
              justifyContent: 'space-around',
              alignItems: 'center',
              height: 60,
            }}>
            <Text style={{fontSize: 24, color: 'white'}}>
              选取格子 NO {this.props.box.relNum}
            </Text>
            <Text style={{fontSize: 24, color: 'white'}}>门已打开</Text>
          </Row>
        </LinearGradient>

        {this.state.state === 0 ? (
          <Row
            style={{
              justifyContent: 'space-around',
              marginTop: 100,
              marginBottom: 100,
            }}>
            {this.props.relType === 3 ? (
              <ColorButton
                onPress={() => {
                  this.setState({relType: 3});
                  this.changeState(1);
                }}
                backgroundColor={'rgba(53, 149, 136, 0.529411764705882)'}
                containerStyle={{
                  height: 60,
                  marginHorizontal: '5%',
                }}
                fontSize={30}
                borderRadius={0.3}>
                归还
              </ColorButton>
            ) : null}
            {this.props.relType === 4 ? (
              <ColorButton
                onPress={() => {
                  this.setState({relType: 4});
                  this.changeState(2);
                }}
                backgroundColor={'rgba(234, 189, 70, 1)'}
                containerStyle={{
                  height: 60,
                  marginHorizontal: '5%',
                }}
                fontSize={30}
                disabledContainerStyle={{backgroundColor: 'lightgray'}}
                borderRadius={0.3}>
                存放
              </ColorButton>
            ) : null}
          </Row>
        ) : null}
        {this.state.state === 1 ? (
          <View
            style={{
              justifyContent: 'center',
              alignItems: 'center',
              marginTop: 100,
              marginBottom: 100,
            }}>
            <Text style={{fontSize: 30, fontWeight: 'bold'}}>
              柜门已打开，请存放！{' '}
            </Text>
            <Text style={{fontSize: 30, fontWeight: 'bold'}}>
              请记得关闭柜门！
            </Text>
          </View>
        ) : null}
        {this.state.state === 2 ? (
          <View>
            <View style={{marginTop: 20, paddingHorizontal: 20}}>
              {/* <Row style={{height: 50}}>
                <Text style={{flex: 1, textAlign: 'center', fontSize: 20}}>
                  业务类型
                </Text>
                <Text
                  onPress={this.selectRelType}
                  style={{
                    flex: 2,
                    textAlign: 'center',
                    fontSize: 20,
                    borderWidth: 1,
                    borderColor: 'lightgray',
                    borderRadius: 8,
                    height: 40,
                    lineHeight: 40,
                  }}>
                  {this.state.relType >= 0
                    ? relTypes[this.state.relType]
                    : '点击选择'}
                </Text>
              </Row> */}
              <Row style={{height: 50}}>
                <Text style={{flex: 1, textAlign: 'center', fontSize: 20}}>
                  物品分类
                </Text>
                <Text
                  onPress={this.selectType}
                  style={{
                    flex: 2,
                    textAlign: 'center',
                    fontSize: 20,
                    borderWidth: 1,
                    borderColor: 'lightgray',
                    borderRadius: 8,
                    height: 40,
                    lineHeight: 40,
                  }}>
                  {this.state.type ? this.state.type.typeName : '点击选择'}
                </Text>
              </Row>
              <Row style={{height: 50}}>
                <Text style={{flex: 1, textAlign: 'center', fontSize: 20}}>
                  物品
                </Text>
                <Text
                  onPress={this.selectMateria}
                  style={{
                    flex: 2,
                    textAlign: 'center',
                    fontSize: 20,
                    borderWidth: 1,
                    borderColor: 'lightgray',
                    borderRadius: 8,
                    height: 40,
                    lineHeight: 40,
                  }}>
                  {this.state.warehousing
                    ? this.state.warehousing.assetsName
                    : '点击选择'}
                </Text>
              </Row>
              <Row style={{height: 50}}>
                <Text style={{flex: 1, textAlign: 'center', fontSize: 20}}>
                  数量
                </Text>
                <TextInput
                  style={{
                    flex: 2,
                    textAlign: 'center',
                    fontSize: 20,
                    borderWidth: 1,
                    paddingTop: 0,
                    paddingBottom: 0,
                    verticalAlign: 'middle',
                    textAlignVertical: 'center',
                    borderColor: 'lightgray',
                    borderRadius: 8,
                    height: 40,
                    lineHeight: 40,
                  }}
                  placeholder={'请输入数量'}
                  value={this.state.warehousingSum}
                  onChangeText={v => this.setState({warehousingSum: v})}
                />
              </Row>
            </View>
            <Row style={{justifyContent: 'space-around', marginTop: 100}}>
              <ColorButton
                onPress={() => this.changeState(0)}
                backgroundColor={'rgba(53, 149, 136, 0.529411764705882)'}
                containerStyle={{
                  height: 60,
                  marginHorizontal: '5%',
                }}
                fontSize={30}
                borderRadius={0.3}>
                取消
              </ColorButton>
              <ColorButton
                onPress={this.save}
                backgroundColor={'rgba(234, 189, 70, 1)'}
                containerStyle={{
                  height: 60,

                  marginHorizontal: '5%',
                }}
                fontSize={30}
                disabled={
                  !this.state.warehousing ||
                  !this.state.warehousingSum ||
                  this.state.relType < 0 ||
                  !this.state.type
                }
                disabledContainerStyle={{backgroundColor: 'lightgray'}}
                borderRadius={0.3}>
                保存
              </ColorButton>
            </Row>
          </View>
        ) : null}
        <TouchableWithoutFeedback
          onPress={() => {
            ModalViewUtil.dismissView();
            if (this.state.state === 1) {
              console.log(
                '------------------------------------------------------',
              );
              this.props.onSavePressed &&
                this.props.onSavePressed({
                  relId: this.props.box.relId,
                });
            }
          }}>
          <Ionicons
            name={'close-outline'}
            size={50}
            style={{
              position: 'absolute',
              left: '45%',
              bottom: -100,
              backgroundColor: '#ffffff66',
              borderRadius: 25,
            }}
            color={'white'}
          />
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

export default BoxManageView2;
